﻿@model string
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>找回密码</title>
    <link href="~/common/Threelinkage/layui/css/layui.css" rel="stylesheet" />
    <style>
        .head {
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: white;
            background-color: rgb(70,180,230);
        }

        .gray {
            color: gray;
        }

        .red {
            color: red;
        }
    </style>
</head>
<body>
    <div class="layui-row head">
        <div class="layui-col-lg1">
            <a href="/Login/GetBackPwd1">
                <i class="layui-icon-left layui-icon"></i>
            </a>
        </div>
        <div class="layui-col-lg6 layui-col-lg-offset2">
            <h2><span class="gray">找回密码&nbsp;&nbsp;>></span>&nbsp;&nbsp;填写验证码</h2>
        </div>
    </div>
    <br />
    <br />
    <br />
    <div class="layui-row">
        <div class="layui-col-lg4 layui-col-lg-offset5">
            <span class="red">您好！我们已经给您的邮箱发送验证码，请您将验证码填写到下方！</span>
        </div>
    </div>
    <br />
    <br />
    <br />
    <div class="layui-row">
        <div class="layui-col-lg4 layui-col-lg-offset4">

            <form class="layui-form" id="formGetBackPwd">

                <div class="layui-form-item">
                    <label class="layui-form-label">邮箱：</label>
                    <div class="layui-input-inline">
                        <input type="email" value="@Model" name="Email" disabled="disabled" lay-verify="required|email" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <input type="button" style="margin-top:-9px;" class="layui-btn layui-btn-radius" id="NewGetBack" value="重新发送" />
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">验证码：</label>
                    <div class="layui-input-block">
                        <input type="text" name="EmailCode" lay-verify="required" placeholder="请填写验证码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid layui-btn-radius" lay-submit lay-filter="formDemo">
                        下一步
                    </button>
                </div>
            </form>
        </div>
    </div>


    <form class="layui-form layui-hide" id="form1">
        <input type="hidden" name="Email" value="@Model" />
        <div class="layui-form-item">
            <label class="layui-form-label">验证码：</label>
            <div class="layui-input-inline">
                <input type="text" name="Code" required lay-verify="required|number" placeholder="验证码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <a href="javascript:void();">
                    <img src="/Login/GetValidCode" id="codeImg" style="margin-top:-7px;" alt="点击" />
                </a>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-radius" id="send" lay-submit lay-filter="SendCode">
                    发送验证码
                </button>
                <button type="reset" id="closeOpen" class="layui-btn layui-btn-primary">取消</button>
            </div>
        </div>
    </form>

    <script src="~/common/Threelinkage/layui/layui.js"></script>
    <script type="text/javascript">
        var i = 60;

        function DisableBtn($) {
            var id = setInterval(function () {
                if (i < 1) {
                    $("#NewGetBack").removeClass("layui-btn-disabled").val("重新发送");
                    clearInterval(id);
                    return;
                }
                i--;
                $("#NewGetBack").val(i + "秒后再试");
            }, 1000);
        }

        layui.use(['jquery', 'layer', 'form'], function (args) {
            var $ = layui.jquery, layer = layui.layer, form = layui.form;

            //重新发送验证码
            $("#NewGetBack").click(function () {
                if ($("#NewGetBack").hasClass("layui-btn-disabled")) {
                    return false;
                }
                i = 60;
                $('#form1').removeClass('layui-hide');
                var openSendCode = layer.open({
                    type: 1,
                    title: "填写验证码",
                    skin: 'layui-layer-rim', //加上边框
                    area: ['450px', '200px'], //宽高
                    closeBtn: false,
                    content: $('#form1')
                });
                $('#closeOpen').click(function () {
                    $('#form1').addClass('layui-hide');
                    layer.close(openSendCode);
                });
            });

            //验证码刷新
            $('#codeImg').click(function () {
                $('#codeImg').attr("src", "/Login/GetValidCode?dt=" + new Date());
            });

            //重新发送验证码表单提交
            form.on('submit(SendCode)', function () {
                $("#NewGetBack").addClass("layui-btn-disabled");
                DisableBtn($);
                var json = $('#form1').serialize();
                $.ajax({
                    url: '/Login/GetBackPwd1', data: json,
                    dataType: "json",
                    type: 'post',
                    success: function (res) {
                        if (res.status == "ok") {
                            layer.msg("发送成功", { icon: 1, time: 1000 });
                            $('#closeOpen').click();
                            $('#form1')[0].reset();
                        } else if (res.status == "redirect") {
                            location.href = res.data;
                        } else if (res.status == "error") {
                            layer.msg(res.errorMsg, { icon: 2, time: 1000 });
                        } else {
                            layer.msg("错误", { icon: 2, time: 1000 });
                        }
                    },
                    error: function () {
                        layer.msg("网络错误", { icon: 2, time: 1000 });
                    }
                });
                $('#codeImg').click();
                return false;
            });

            form.on('submit(formDemo)', function () {
                var load = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
                var json = $('#formGetBackPwd').serialize();
                $.ajax({
                    url: '/Login/GetBackPwd2', data: json,
                    dataType: "json",
                    type: 'post',
                    success: function (res) {
                        if (res.status == "ok") {
                            location.href = "/Login/GetBackPwd3";
                        } else if (res.status == "redirect") {
                            location.href = res.data;
                        } else if (res.status == "error") {
                            layer.msg(res.errorMsg, { icon: 2, time: 1000 });
                        } else {
                            layer.msg("错误", { icon: 2, time: 1000 });
                        }
                        layer.close(load);
                    },
                    error: function () {
                        layer.msg("网络错误", { icon: 2, time: 1000 });
                        layer.close(load);
                    }
                });
                return false;
            })
        });

    </script>
</body>
</html>
